<template>
  <view @click="showCompanyList=false">
    <l-background />
    <view class="margin-top-16">
      <l-form-cell
        v-for="(item,index) in formList"
        :key="index"
        v-model="form[item.attr]"
        :label="item.placeholder"
        :placeholder="'请输入' + item.placeholder"
        :must="item.must"
        :maxlength="item.maxlength"
        :type="item.type"
        :unlined="item.attr==='impression'"
        :has-slot="item.slot"
      >
        <tui-dropdown-list
          v-if="item.slot"
          shadow
          :transition="false"
          :height="530"
          :top="88"
          :show="showList"
          background-color="#fff"
          class="flex-item"
        >
          <input
            slot="selectionbox"
            v-model="form[item.attr]"
            style="height:66rpx"
            type="text"
            class="text-30 color-t1 text-right"
            placeholder-class="color-t3"
            :placeholder="'请输入'+item.placeholder"
            @input="pageCompany"
            @focus="showCompanyList=true"
          >
          <template slot="dropdownbox">
            <scroll-view style="max-height: 530rpx;" scroll-y>
              <view
                v-for="(val,key) in companyList"
                :key="key"
                class="padding-lr-20 item"
                hover-class="hover"
                :hover-stay-time="70"
                @click="chooseCompany(val)"
              >
                <view class="list-item flex-row align-center" :style="{border:key === companyList.length-1 ? 'none' : ''}">
                  <text class="text-30 color-t1">{{ val }}</text>
                </view>
              </view>
            </scroll-view>
          </template>
        </tui-dropdown-list>
      </l-form-cell>
    </view>
    <view class="button">
      <tui-button @click="save">确认{{ customerInfo ? '修改' : '添加' }}</tui-button>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import { formVerify } from '@/common/util'
import { pageCompany, addCustomer, editCustomer } from '../api'
export default {
  name: 'SaveManagement',
  data() {
    return {
      form: {
        name: '',
        phone: '',
        company: '',
        job: '',
        impression: '',
        edit: false
      },
      formList: [
        { attr: 'name', placeholder: '客户名称', must: true, type: 'text', maxlength: 30, slot: false },
        { attr: 'phone', placeholder: '手机号', must: false, type: 'number', maxlength: 11, slot: false, test: 'mobile' },
        { attr: 'company', placeholder: '所在单位', must: false, type: 'text', maxlength: 30, slot: true },
        { attr: 'job', placeholder: '职务', must: false, type: 'text', maxlength: 10, slot: false },
        { attr: 'impression', placeholder: '客户印象', must: false, type: 'text', maxlength: 30, slot: false }
      ],
      showCompanyList: false,
      companyList: []
    }
  },
  computed: {
    showList() {
      return this.showCompanyList && this.companyList.length
    },
    ...mapGetters({
      customerInfo: 'customerInfo'
    })
  },
  onShow() {
    let title = '新增客户'
    if (this.customerInfo) {
      title = '编辑客户'
      Object.assign(this.form, this.customerInfo)
    }
    uni.setNavigationBarTitle({
      title
    })
  },
  created() {
    this.pageCompany()
  },
  methods: {
    // 获取客户单位
    async pageCompany() {
      const [err, res] = await pageCompany({
        company: this.form.company
      })
      if (!this.$http.errorCheck(err, res)) return false
      let list = res.data.data.records
      if (!list) list = []
      const arr = []
      list.forEach(item => {
        if (item) arr.push(item)
      })
      this.companyList = arr
    },
    // 添加/修改客户
    async save() {
      if (formVerify(this.form, this.formList)) {
        let api = addCustomer
        if (this.customerInfo) api = editCustomer
        const [err, res] = await api(this.form)
        if (!this.$http.errorCheck(err, res)) return false
        this.toast(this.customerInfo ? '修改成功' : '添加成功', () => {
          this.jump()
        })
      }
    },
    chooseCompany(val) {
      this.form.company = val
      this.showCompanyList = false
    }
  }
}
</script>

<style scoped lang="scss">
.list-item{
  border-bottom:2rpx solid $color-border;
  height:106rpx;
}
.button{
  margin-top:80rpx;
  padding:0 26rpx;
}
</style>
